@import '@material/button/mixins.import';
@import '@material/button/variables.import';
@import '@material/fab/mixins.import';
@import '@material/ripple/mixins.import';
@import '@material/icon-button/mixins.import';
@import '../../material/core/ripple/ripple';
@import '../mdc-helpers/mdc-helpers';

// Selector for the element that has a background color and opacity applied to its ::before and
// ::after for state interactions (hover, active, focus). Their API calls this their
// "ripple target", but we do not use it as our ripple, just state color.
$mat-button-state-target: '.mdc-button__ripple';

// Applies the disabled theme color to the text color.
@mixin _mat-button-disabled-color() {
  @include mdc-theme-prop(color,
      mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
}

// Wraps the content style in a selector for the disabled state.
// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
// override this, neither will it apply to anchor tags. This needs to override the
// previously set theme color, so it must be ordered after the theme styles.
// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
// manually styling disabled buttons with a [disabled] selector.
@mixin _mat-button-apply-disabled-style() {
  &[disabled][disabled] {
    @content;
  }
}

// The MDC button's ripple ink color is based on the theme color, not on the foreground base
// which is what the ripple mixin uses. This creates a new theme that sets the color to the
// foreground base to appropriately color the ink.
@mixin _mat-button-ripple-ink-color($mdcColor) {
  @include mat-ripple-theme((
    foreground: (
      base: mdc-theme-prop-value($mdcColor)
    ),
  ));
}

// Applies the disabled theme background color for raised buttons. Value is taken from
// mixin `mdc-button--filled`.
// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
// or otherwise have a mixin we can call to apply this style for both button and anchors.
@mixin _mat-button-disabled-background() {
  @include mdc-theme-prop(background-color, rgba(mdc-theme-prop-value(on-surface), 0.12));
}


@mixin mat-mdc-button-theme($theme) {
  @include mat-using-mdc-theme($theme) {
    // Add state interactions for hover, focus, press, active. Colors are changed based on
    // the mixin mdc-states-base-color
    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
      @include mdc-states(
        $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
    }

    .mat-mdc-button, .mat-mdc-outlined-button {
      &.mat-unthemed {
        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include _mat-button-ripple-ink-color(primary);
      }

      &.mat-accent {
        @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include _mat-button-ripple-ink-color(secondary);
      }

      &.mat-warn {
        @include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include _mat-button-ripple-ink-color(error);
      }
    }

    .mat-mdc-raised-button,
    .mat-mdc-unelevated-button {
      &.mat-unthemed {
        @include mdc-button-container-fill-color(
            $mdc-theme-surface, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
          $ripple-target: $mat-button-state-target);
      }

      &.mat-primary {
        @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include _mat-button-ripple-ink-color(on-primary);
      }

      &.mat-accent {
        @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include _mat-button-ripple-ink-color(on-secondary);
      }

      &.mat-warn {
        @include mdc-button-container-fill-color(error, $query: $mat-theme-styles-query);
        @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
        @include mdc-states-base-color(
          on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include _mat-button-ripple-ink-color(on-error);
      }

      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-background();
      }
    }

    .mat-mdc-outlined-button {
      &.mat-unthemed {
        @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query);
      }

      &.mat-accent {
        @include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query);
      }

      &.mat-warn {
        @include mdc-button-outline-color(error, $query: $mat-theme-styles-query);
      }

      @include _mat-button-apply-disabled-style() {
        @include mdc-theme-prop(border-color,
            mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-background));
      }
    }

    .mat-mdc-raised-button {
      @include _mat-button-apply-disabled-style() {
        @include mdc-elevation(0, $query: $mat-theme-styles-query);
      }
    }

    .mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-color();
      }
    }

    @include mdc-button-without-ripple($query: $mat-theme-styles-query);
  }
}

@mixin mat-mdc-button-typography($config) {
  @include mat-using-mdc-typography($config) {
    @include mdc-button-without-ripple($query: $mat-typography-styles-query);
  }
}

@mixin mat-mdc-fab-theme($theme) {
  @include mat-using-mdc-theme($theme) {
    .mat-mdc-fab, .mat-mdc-mini-fab {
      @include mdc-states(
          $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);

      &.mat-unthemed {
        @include mdc-states-base-color(
          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
          $ripple-target: $mat-button-state-target);
        @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-states-base-color(
          on-primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
        @include _mat-button-ripple-ink-color(on-primary);
      }

      &.mat-accent {
        @include mdc-states-base-color(
          on-secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
        @include _mat-button-ripple-ink-color(on-secondary);
      }

      &.mat-warn {
        @include mdc-states-base-color(
          on-error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
        @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
        @include _mat-button-ripple-ink-color(on-error);
      }

      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-color();
        @include _mat-button-disabled-background();
        @include mdc-elevation(0, $query: $mat-theme-styles-query);
      }
    }

    @include mdc-fab-without-ripple($query: $mat-theme-styles-query);
  }
}

@mixin mat-mdc-fab-typography($config) {
  @include mat-using-mdc-typography($config) {
    @include mdc-fab-without-ripple($query: $mat-typography-styles-query);
  }
}

@mixin mat-mdc-icon-button-theme($theme) {
  @include mat-using-mdc-theme($theme) {
    .mat-mdc-icon-button {
      @include mdc-states(
          $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);

      &.mat-unthemed {
        @include mdc-states-base-color(
          $mdc-theme-on-surface, $query: $mat-theme-styles-query,
          $ripple-target: $mat-button-state-target);
        @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
      }

      &.mat-primary {
        @include mdc-states-base-color(
          primary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
        @include _mat-button-ripple-ink-color(primary);
      }

      &.mat-accent {
        @include mdc-states-base-color(
          secondary, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query);
        @include _mat-button-ripple-ink-color(secondary);
      }

      &.mat-warn {
        @include mdc-states-base-color(
          error, $query: $mat-theme-styles-query, $ripple-target: $mat-button-state-target);
        @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
        @include _mat-button-ripple-ink-color(error);
      }

      @include _mat-button-apply-disabled-style() {
        @include _mat-button-disabled-color();
      }
    }

    @include mdc-icon-button-without-ripple($query: $mat-theme-styles-query);
  }
}

@mixin mat-mdc-icon-button-typography($config) {
  @include mat-using-mdc-typography($config) {
    @include mdc-icon-button-without-ripple($query: $mat-typography-styles-query);
  }
}
